<!--
 * @FilePath     : /study_code/layui/13-3-1.html
 * @Description  : cols[0].toolbar 配置的 单元格-工具栏按钮事件
 * @Date         : 2025-04-07 17:14:26
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 14:40:06
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <table id="demo" lay-filter="test"></table>

    <!-- ！属性 *lay-event=""* 是模板的关键所在，值可随意定义。 -->
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      {{# if(d.experience > 500){ }}
      <a class="layui-btn layui-btn-xs" lay-event="check">审核积分</a>
      {{# } }}
    </script>

    <script src="/layui/dist/layui.js"></script>
    <script src="/layui/table/common.js"></script>
    <script>
      var table = layui.table

      table.render({
        elem: '#demo',
        data: tableData,

        cols: [
          [
            { field: 'id', title: 'ID', width: 80 },
            { field: 'experience', title: '积分', width: 80 },
            { field: 'handle', title: '操作', width: 240, toolbar: '#barDemo' },
          ],
        ],
      })

      /*
      1、cols 表头参数子项的 toolbar 字段设置模板字符串；
      2、模板中用 lay-event 属性标记事件触发的类型；
      3、table.on('toolbar(test)', callback(obj)) 对事件监听做出响应；
      */

      /**
       * @brief:
       * @param {*} tool(test)
       *    tool: 这里处理的是单元格工具事件；
       *    test: 监听的表格的 lay-filter 属性的值是 test；
       * @param {*} function(obj) {}
       *    obj.data 当前表格行数据；
       *    obj.event 当前事件类型，工具条 lay-event 属性标注的值；
       *    obj.tr 表格行；
       * @return {*}
       */
      table.on('tool(test)', function (obj) {
        var data = obj.data,
          layEvent = obj.event,
          tr = obj.tr

        console.log(0, '事件类型', layEvent)

        switch (layEvent) {
          case 'detail':
            console.log(1)
            break
          case 'edit':
            console.log(2)
            break
          case 'del':
            console.log(3)
            break
          case 'check':
            console.log(4)
            break
          default:
            break
        }
      })
    </script>
  </body>
</html>
